<template>
    <Table ref="tableElRef" class="custom-table-wrap" :scroll="scrollConfig">
        <template #[item]="data" v-for="item in slotNames" :key="item">
            <a-tooltip v-bind="buildValidateTooltipProps(data.record, item)" v-if="hasError(data.record, item)">
                <div class="has-error" style="width: 100%">
                    <slot :name="item" v-bind="data" />
                </div>
            </a-tooltip>
            <HToolTip placement="top" :title="data.record[item]" v-else-if="data.column && data.column.ellipsis">
                <slot :name="item" v-bind="data" />
            </HToolTip>
            <slot :name="item" v-bind="data" v-else />
        </template>
    </Table>
</template>
<script lang="ts">
import HToolTip from '@/components/HToolTip/index.vue';
import { Table } from 'ant-design-vue';
import { useTableScroll, useTableValidate } from './hooks';
import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
    name: 'CustomTable',
    components: {
        Table,
        HToolTip
    },
    props: {
        rules: {
            type: Object,
            default: () => ({})
        }, // 验证规则
        autoResize: { type: Boolean, default: false } // 高度自适应
    },
    setup(props, { slots, attrs }) {
        const tableElRef = ref();
        const slotNames = computed(() => {
            return Object.keys(slots);
        });
        const allProps: any = computed(() => {
            return {
                ...props,
                ...attrs
            };
        });
        const { scrollConfig } = useTableScroll(allProps, tableElRef);
        const { validate, validateRow, hasError, buildValidateTooltipProps } = useTableValidate(allProps);
        return {
            tableElRef,
            slotNames,
            validate,
            validateRow,
            hasError,
            buildValidateTooltipProps,
            scrollConfig
        };
    }
});
</script>
<style lang="less" scoped>
::v-deep(.ant-tooltip) {
    z-index: 1 !important;
}
</style>